<template>
  <div>
    <div class="tabBtn">
      <a
        href="javascript:void(0);"
        v-for="(item,index) in tab"
        :key="index"
        :class="{'active': tabActive == index}"
        @click="changeTab(index)"
      >{{item}}</a>
    </div>
    <div class="tabSwper">
      <swiper
        id="swiperBox"
        :options="swiperOption"
        ref="mySwiper"
      >
        <swiper-slide class="swiper-slide">
          <scroll class="list1">
            <div
              slot="listInner"
              class="listInner clearfix"
            >
              <div
                class="listClause"
                v-for="(item,index) in list1"
                :key="index"
              >
                <span>{{item.site}}</span>
                <span>{{item.projectTitle}}</span>
              </div>
            </div>
          </scroll>
        </swiper-slide>
        <swiper-slide class="swiper-slide">
          <scroll class="list2">
            <div
              slot="listInner"
              class="listInner clearfix"
            >
              <div
                class="listClause"
                v-for="(item,index) in list2"
                :key="index"
              >
                <span>{{item.site}}</span>
                <span>{{item.list[0].data}}</span>
              </div>
            </div>
          </scroll>
        </swiper-slide>
      </swiper>
    </div>
    <van-button
      class="default"
      @click="backHome"
      type="primary"
    >返回首页</van-button>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import scroll from './../base/scroll/scroll'
import API from './../api/index'

export default {
  name: 'tab',
  data () {
    return {
      tab: ['版块1', '版块2'],
      tabActive: 0,
      list1: [],
      list2: [],
      swiperOption: {
        notNextTick: true,//notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        direction: 'horizontal',
        slidesPerView: 'auto',
        mousewheelControl: true,
        onSlideChangeEnd: (swiper) => {
          this.tabActive = swiper.activeIndex;
        }
      }
    }
  },
  mounted () {
    this.getList();
  },
  created () {
    setTimeout(() => {
      this.swiper.update();
    }, 20);
  },
  computed: {
    swiper () {
      return this.$refs.mySwiper.swiper;
    }
  },
  methods: {
    changeTab (index) {
      this.tabActive = index;
      this.swiper.slideTo(index, 1000, false)
    },
    getList () {
      this.$jsonp(API.test).then(json => {
        this.list1 = json.concat(json).concat(json);
        this.list2 = json;
      }).catch(err => {
        console.log(err);
      })
    },
    backHome () {
      this.$router.replace({ name: 'home' });
    }
  },
  components: {
    swiper,
    swiperSlide,
    scroll
  }
}
</script>

<style lang="less" scoped>
.tabBtn {
  margin-top: 5%;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  font-size: 0.36rem;
  a {
    padding: 0.2rem 0.3rem;
    color: #ffffff;
    background-color: #8aaaf2;
  }
  a.active {
    background-color: #51def3;
  }
}
.tabSwper {
  width: 100%;
  height: 5rem;
  background-color: red;
  .swiper-container {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    color: #ffffff;
    text-align: center;
    font-size: 0.36rem;
  }
}
.list1,
.list2 {
  span {
    display: inline-block;
    width: 50%;
    font-size: 0.24rem;
  }
}
.default {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

